<template>
    <div>
        <HomeTop></HomeTop>
        <HomeRight></HomeRight>
        <MyCenterPlugin></MyCenterPlugin>
        <ShoppingCartSearch></ShoppingCartSearch>
        <div class="SecuritySetting-logo">
            <img
                src="https://img.alicdn.com/imgextra/i2/O1CN01bw6IxW1J9dTQPa01x_!!6000000000986-2-tps-148-56.png"></img>
            <h2>我的淘宝</h2>
        </div>
        <div class="SecuritySetting-part1">
            <span><strong>您的基础信息</strong></span>
        </div>
        <div class="SecuritySetting-part1-info">
            <span class="part1-name">账号名</span>
            <span class="part1-namedata">{{ info.accountName == null ? "还未设置账号名" : info.accountName }}</span>
            <span class="part1-email">登陆邮箱</span>
            <span class="part1-emaildata">{{ info.loginEmail == null ? "您尚未设置登录邮箱" : info.loginEmail }}</span>
            <button class="addemail">添加邮箱</button>
            <span class="part1-phone">绑定手机</span>
            <span class="part1-phonedata">{{ info.bindPhone == null ? "您尚未绑定手机" : info.bindPhone }}</span>
            <button class="addphone">修改手机</button>
        </div>
        <div class="SecuritySetting-part2">
            <span><strong>您的登录设置</strong></span>
        </div>
        <div class="SecuritySetting-part2-info">
            <span class="part2-detail1">保持登录信息</span>
            <span class="part2-detail2">您已成功开启保持登录功能，下次访问更便捷</span>
            <select>
                <option value="1">开启</option>
                <option value="2">关闭</option>
            </select>
            <span class="select-i"><i class="iconfont icon-xiala" ></i></span>

        </div>
        <div class="SecuritySetting-part3">
            <span><strong>您的安全服务</strong></span>
        </div>
        <div class="SecuritySetting-part3-info">
            <div class="part3-1">
                <span class="part3-name1">安全等级</span>
                <span class="part3-status1" :style="securitystyle()">{{ securitydj() }}</span>
                <el-progress class="jdt-outside" :percentage="percentage" :status="changejdtstatus()"></el-progress>


                <img src="https://i.alipayobjects.com/i/ecmng/png/201410/3fzwRZScO5.png"></img>
                <span class="part3-detail1">完成 手机淘宝身份认证 <a>/密保设置</a> ，提升账号安全。</span>
            </div>
            <div class="part3-2">
                <span class="part3-status2" v-show="true"><i class="iconfont icon-tongguo"></i>已认证</span>
                <span class="part3-status2" v-show="false"><i class="iconfont icon-jinggao"></i>未认证</span>
                <span class="part3-name2">身 份 认 证</span>
                <span class="part3-detail2">用于提升账号的安全性和信任级别。认证后的有卖家记录的账号不能修改认证信息。</span>
                <span class="part3-endstatus2"><strong>未认证</strong></span>
            </div>
            <div class="part3-3">
                <span class="part3-status3" v-show="true"><i class="iconfont icon-tongguo"></i>已设置</span>
                <span class="part3-status3" v-show="false"><i class="iconfont icon-jinggao"></i>未设置</span>
                <span class="part3-name3">登 录 密 码</span>
                <span class="part3-detail3">安全性高的密码可以使账号更安全。建议您定期更换密码，且设置一个包含数字和字母，并长度超过6位以上的密码。</span>
                <a>修改</a>
            </div>
            <div class="part3-4">
                <span class="part3-status4" v-show="true"><i class="iconfont icon-tongguo"></i>已设置</span>
                <span class="part3-status4" v-show="false"><i class="iconfont icon-jinggao"></i>未设置</span>
                <span class="part3-name4">密 保 问 题</span>
                <span class="part3-detail4">是您找回登录密码的方式之一。建议您设置一个容易记住，且最不容易被他人获取的问题及答案，更有效保障您的密码安全。</span>
                <a>设置</a>
            </div>
        </div>
    </div>
</template>
<script>
import HomeTop from "../components/HomeTop.vue";
import HomeRight from "../components/HomeRight.vue";
import MyCenterPlugin from "@/components/MyCenterPlugin.vue";
import ShoppingCartSearch from "@/components/ShoppingCartSearch.vue";
import "../style/SecuritySetting.css";
export default {
    name: "SecuritySetting",
    data() {
        return {
            info: {
                accountName: "tb4350649158",
                loginEmail: null,
                bindPhone: "123456"
            },
            percentage: 100,

        }
    },
    methods: {
        changejdtstatus() {
            if (this.percentage >= 0 && this.percentage < 40) {
                return "exception"
            }
            if (this.percentage >= 40 && this.percentage < 80) {
                return "warning"
            }
            if (this.percentage >= 80 && this.percentage <= 100) {
                return "success"
            }
        },
        securitydj() {
            if (this.percentage >= 0 && this.percentage < 40) {
                return "低"
            }
            if (this.percentage >= 40 && this.percentage < 80) {
                return "中"
            }
            if (this.percentage >= 80 && this.percentage <= 100) {
                return "高"
            }

        },
        securitystyle() {
            if (this.percentage >= 0 && this.percentage < 40) {
                return { color: "red" };
            } else if (this.percentage >= 40 && this.percentage < 80) {
                return { color: "rgb(240, 198, 12)" };
            } else if (this.percentage >= 80 && this.percentage <= 100) {
                return { color: "green" };
            }

        }
    },



}
</script>